import React,{useEffect,useState} from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Events from './event';
import { useTranslation } from '@/app/utils/useTranslation';
import {size} from '@/app/utils';
let ToastModal = ()=>{
    const { t } = useTranslation();
    let [modalVisible,setModalVisible] = useState(false);
    let [modalOptions,setModalOptions] = useState({
        title:'',
        content:'',
        callback:()=>{},
    });

    useEffect(()=>{
        Events.addListener("dialog",_modal)
    },[])
    
    const _modal = (options:any = {}) => {
        console.log(options)
        setModalVisible(true);
        setModalOptions(options);
    }

    const _sure=()=>{
        setModalVisible(false);
        setModalOptions({ title: '', content: '', callback: () => {} });
        modalOptions.callback();
    }

    return (
        modalVisible?<View style={styles.modalbox}>
                        <View style={styles.content}>
                            <Text style={styles.tips}>{modalOptions.title}</Text>
                            <View style={{marginLeft:size(15),marginRight:size(15),marginBottom:size(30)}}>
                                <Text numberOfLines={3} style={{textAlign:'center',fontSize:size(16),color:"#767676"}}>{modalOptions.content}</Text>
                            </View> 
                            <View style={{ flexDirection: "row",marginLeft:size(15),marginRight:size(15),marginBottom:size(10)}}>
                                <Pressable onPress={() => {
                                    setModalVisible(false);
                                    setModalOptions({ title: '', content: '', callback: () => {} })
                                }} style={[styles.btns,{marginRight:size(15)}]}>
                                    <Text style={[styles.btnsText,styles.btnsquxiaoText]}>{t('t174')}</Text>
                                </Pressable>
                                <Pressable onPress={() => {
                                    _sure();
                                }} style={styles.btns}>
                                    <Text style={[styles.btnsText,styles.btnsquedingText]}>{t('t55')}</Text>
                                </Pressable>
                            </View>
                        </View>
                    </View>:null
    )
}

const styles = StyleSheet.create({
    modalbox: {
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        elevation: 999,
        backgroundColor: "rgba(0,0,0,0.05)",
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center'
    },
    content: {
        width:size(300),
        paddingTop: size(10),
        borderRadius: size(20),
        backgroundColor: "#fff",
        fontSize: size(16)
    },
    tips: {
        fontSize: size(16),
        lineHeight: size(20),
        minHeight: size(60),
        textAlign: "center",
        padding: size(10),
        color: "#333"
    },
    btns: {
        textAlign: "center",
        height:size(40),
        flex: 1,
        borderRadius:size(8)
    },
    btnsquxiaoText:{
        color:"#38B781"
    },
    btnsquedingText:{
        color:"red"
    },
    btnsText: {
        textAlign: "center",
        lineHeight:size(40),
        fontSize:size(16),
        color: "#fff"
    },
    formItem:{
        backgroundColor:'#eee',
        marginLeft:size(15),
        marginRight:size(15),
        paddingLeft:size(12),
        paddingRight:size(12),
        borderRadius:size(5),
        marginBottom:size(40)
    },
    formItemRightText:{
        width:'100%',
        height:size(50),
        color:'#333',
    }
})
export default ToastModal;